<template>
  <el-dialog
    :model-value="props.visible"
    :title="props.title"
    :width="props.width + 'px'"
    :before-close="onClose"
    append-to-body
    :close-on-click-modal="false"
  >
    <!-- 内容显示区 -->
    <div class="container" :style="{ height: height + 'px' }">
      <slot name="content"></slot>
    </div>

    <!-- footer slot -->
    <div class="dialog-footer">
      <slot name="footer">
        <el-button type="danger" @click="onClose">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </slot>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
// 弹框数据类型
interface DialogProps {
  title: string;
  visible: boolean;
  width: number;
  height: number;
}
// 接收父组件传递的参数
const props = withDefaults(defineProps<DialogProps>(), {
  title: "新增",
  visible: false,
  width: 630,
  height: 280,
});
// 注册事件
const emit = defineEmits(["onClose", "onConfirm"]);
// 弹框关闭
const onClose = () => {
  emit("onClose");
};
// 弹框确认
const onConfirm = () => {
  emit("onConfirm");
};
</script>

<style lang="scss">
.container {
  overflow-x: initial;
  overflow-y: auto;
}

.el-dialog {
  border-radius: 12px !important; // 统一圆角
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; // 添加阴影效果

  .el-dialog__header {
    margin-right: 0px;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    background-color: #17223b !important;
    padding: 16px 24px; // 增加内边距

    .el-dialog__title {
      color: #fff;
      font-size: 18px; // 增大字体
      font-weight: 600;
      line-height: 1.5; // 调整行高
    }

    .el-dialog__headerbtn {
      top: 16px; // 调整关闭按钮位置
      right: 24px;

      .el-dialog__close {
        color: #fff;
        font-size: 18px; // 增大关闭图标

        &:hover {
          color: #ff6b6b; // 悬停时改变颜色
        }
      }
    }
  }

  .el-dialog__body {
    padding: 20px 24px; // 增加内边距
    font-size: 14px;
    color: #333; // 调整文字颜色
    line-height: 1.6; // 调整行高
  }

  .dialog-footer {
    border-top: 1px solid #e8eaec !important;
    padding: 16px 24px; // 增加内边距
    text-align: right; // 按钮右对齐
  }

  .el-button {
    padding: 8px 16px; // 调整按钮内边距
    font-size: 14px; // 调整按钮字体大小
    border-radius: 6px; // 按钮圆角
    transition: background-color 0.3s ease; // 添加过渡效果

    &:first-child {
      margin-right: 8px; // 调整按钮间距
    }

    &.el-button--primary {
      background-color: #409eff; // 主按钮颜色
      border-color: #409eff;

      &:hover {
        background-color: #66b1ff; // 悬停时颜色
        border-color: #66b1ff;
      }
    }

    &.el-button--danger {
      background-color: #f56c6c; // 危险按钮颜色
      border-color: #f56c6c;

      &:hover {
        background-color: #f78989; // 悬停时颜色
        border-color: #f78989;
      }
    }

    &.el-button--default {
      &:hover {
        background-color: #f5f7fa; // 悬停时颜色
        border-color: #f5f7fa;
      }
    }
  }
}
</style>
